<template>
  <div id="box">
    <h1>App</h1>
    {{ uname }}-{{ age + 100 }}-{{ count }}
    <!-- <ComA :value="uname" @update-value="uname = $event"></ComA> -->
    <!-- <ComA :modelValue="uname" @update:modelValue="uname = $event"></ComA> -->

    <!-- <ComA v-model="uname"></ComA> -->
    <ComA v-model:modelValue="uname" v-model:age.number="age" v-model:max-count="count"></ComA>

  </div>
</template>
<script setup>
import { ref, shallowRef } from 'vue';
import ComA from './components/ComA.vue'

const uname = ref('jack')
const age = ref(20)
const count = ref(100)
</script>

<style>
div {
  border: solid;
  padding: 10px;
}
</style>